<template>
    <div>
        <div v-test.hehe:foo="currentCount">sync component 1 <strong style="font-size: 18px; font-weight: bold;display: inline-block;background-color: red;">{{currentCount}}</strong></div>
        <div style="text-align: justify;">
            <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" width="128">
            <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" width="128">
            <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" width="128">
            <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" width="128">
            <i class="justify-fix"></i>
            <i class="justify-fix"></i>
            <i class="justify-fix"></i>
        </div>
    </div>
</template>

<script>
    export default {
        name: "sync-component1",
        data() {
            return {
                currentCount: 0
            }
        },
        mounted() {
            setInterval(() => {
                this.currentCount ++
            }, 1000)
        },
        directives: {
            test: {
                bind(el, binding) {
                    const targetEl = el.querySelector('strong')
                    targetEl.style.display = 'inline-block'
                    targetEl.style.transform = 'scale(1)'
                    targetEl.style.transition = 'all .5s linear'
                },
                componentUpdated(el, binding) {
                    const targetEl = el.querySelector('strong')
                    const value = binding.value
                    if(value % 2 === 0) {
                        targetEl.style.transform = 'scale(2)'
                    }else if(value % 3 === 0){
                        targetEl.style.transform = 'transalteX(50%)'
                    }else {
                        targetEl.style.transform = 'scale(0.5)'
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .justify-fix { display: inline-block; width: 128px; }
    i {background-color: red;}
</style>
